<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>网关</span>
        <el-button type="text" icon="el-icon-refresh" style="float: right;padding: 0" @click="getRoutes">刷新</el-button>
      </div>
      <div>
        <el-table :data="routes" style="width: 100%">映射路径 服务名称 服务实例地址
          <el-table-column prop="path" label="映射路径" width="150"></el-table-column>
          <el-table-column prop="serviceId" label="服务名称" width="150"></el-table-column>
          <el-table-column prop="serviceInstances" label="服务实例地址">
            <template slot-scope="scope">
              <div v-for="(item,index) in scope.row.serviceInstances" :key="index">
                <el-tag type="warning">{{item.uri}}</el-tag>
                <el-tag type="success">{{item.instanceInfo.status}}</el-tag>
                <el-tag>port:{{item.port}}</el-tag>
                <el-tag>profile:{{item.instanceInfo.metadata.profile}}</el-tag>
                <el-tag>zone:{{item.instanceInfo.metadata.zone}}</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routes: []
    };
  },
  computed: {},
  created() {
    this.getRoutes();
  },
  methods: {
    getRoutes() {
      this.$http({
        url: "/api/gateway/routes/",
        method: "GET"
      }).then(resp => {
        this.routes = resp.data;
      });
    }
  },
  filters: {
    numFilter0(value) {
      let realVal = Number(value).toFixed(0);
      return Number(realVal);
    },
    numFilter2(value) {
      // 截取当前数据到小数点后两位
      let realVal = Number(value).toFixed(2); // num.toFixed(2)获取的是字符串
      return Number(realVal);
    }
  }
};
</script>
<style scoped>
.item-row {
  margin: 20px 0;
}
.box-card:not(:first-child) {
  margin-top: 15px;
}
.box-card .el-tag + .el-tag {
  margin-left: 10px;
}
</style>
